<template>
	<view>
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<!--
				<view class="application-record" style="height: 50rpx; background-color: #7468fb" @click="jumpToList">
					添加记录
					<text class="iconfont icon-xiangyou"></text>
				</view>
				-->
				<view class='list'>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">类型</text>
							<view style="display: flex;" @click="onTapTypes">
								<text>{{typeNames[currType]}}</text>
								<text class="iconfont icon-xiala1" style="margin-left: 10rpx; display: inline-block; position: relative; transform: rotate(180deg); -webkit-transform: rotate(180deg); width: 80rpx; text-align: center" />
							</view>
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<view style="display: flex; width: 100%; justify-content: space-between;">
								<text class="item-name">原因</text>
								<view style="color: #666666; font-size: 24rpx;">
									<text v-if="detail">{{ detail.length }}</text>
									<text v-else>0</text>
									/200
								</view>
							</view>
							<view style="border-radius: 10px; margin-top: 20rpx; width: 100%; background: #f5f5f5; padding: 20rpx;">
								<textarea v-model="detail" value="" placeholder="请简述相关原因" placeholderClass="placeholderClass" maxlength="200" />
							</view>
						</view>
					</view>
					<!-- ====== begin 上传图片功能 ====== -->
					<view class="item">
						<view class='acea-row row-middle'>
							<text class="item-title">{{currType==0?"请上传营业执照等资质图片":"相关说明图片"}}</text>
							<text class="item-desc">(图片最多可上传10张,格式支持JPG、PNG、JPEG)</text>
							<view class="upload">
								<view class='pictrue' v-for="(item,index) in images" :key="index" :data-index="index" @click="previewPics">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='delPic(index)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadPic' v-if="images.length < 10">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<!-- ====== end 上传图片功能 ====== -->
					
					
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">您的联系电话</text>
							<view>{{userPhone}}</view>
							<!-- ====== begin 获取微信绑定手机号码 ====== 
							注意只有能真机上才有效，在模拟器上会提示错误：Error: 用户绑定的手机需要进行验证 -->
							<!-- #ifdef MP -->
							<button form-type="submit" class="getPhoneBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><text class="iconfont icon-weixin2"></text>获取微信绑定号码</button>
							<!-- #endif -->
							<!-- ====== end 获取微信绑定手机号码 ====== -->
						</view>
					</view>
					
					<button class='submitBtn on' @click="formSubmit">提交</button>
				</view>
			</view>
		</form>
		
		<!-- ====== begin 授权功能 ====== -->
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<!-- ====== end 授权功能 ====== -->
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	
	import {
		addShopComplaint,
	} from '@/api/fsh.js';
	
	import {
		mapGetters
	} from "vuex";
	
	
	// ====== begin 授权功能 ======
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		toLogin
	} from '@/libs/login.js';	
	// ====== end 授权功能 ======
	
	
	// ====== begin 获取微信绑定手机号码 ======
	import {
		appletsDecrypt 
	} from '@/api/api.js';	
	// ====== begin 获取微信绑定手机号码 ======
	
	const app = getApp();
	export default {
		components: {
			// ====== begin 授权功能 ======
			// #ifdef MP
			authorize,
			// #endif
			// ====== end 授权功能 ======
		},
		
		data() {
			return {
				// ====== begin 授权功能 ======
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				// ====== end 授权功能 ======
				
				typeNames:[			// 类型
					"认领渔具店",
					"渔具店已关闭",
					"地图位置错误",
					"渔具店信息错误",
					"渔具店重复",
					"其它",
				], 
				currType: 0, 		// 当前选择类型
				detail: "",			// 名称
				userPhone: "",		// 联系电话
				images: [], 		// 多图功能
				
				code: ''			// 获取微信绑定手机号码
			};
		},
		
		
		// ====== begin 授权功能 ======
		computed: mapGetters(['isLogin']),
		// ====== end 授权功能 ======
		
		onLoad(options) {
			this.shopId = options.shopId;
			
			if (this.isLogin) { // 授权功能
			} else {
				// ====== begin 授权功能 ======
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
				// ====== end 授权功能 ======
			}
			
			
			// ====== begin 获取微信绑定手机号码 ======
			let that = this;
			// #ifdef MP
			wx.login({
			  success (res) {
			    if (res.code) {
			     that.code = res.code				 
			    } else {
			      console.log('登录失败！' + res.errMsg)
			    }
			  }
			})
			// #endif
			// ====== end 获取微信绑定手机号码 ======
		},
		onShow() {

		},
		methods: {
			// ====== begin 授权功能 ======
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				if(this.shopEditType == 2)
					this.loadMyMerchants();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// ====== end 授权功能 ======
			
			
			// ====== begin 上传图片功能 ======
			// 上传图片
			uploadPic(t) {
				this.$util.uploadImageOne('upload/image', res=> {
					this.images.push(res.data.path);
				});
			},
			// 图片预览
			previewPics(e, t) {
				let idx = e.currentTarget.dataset.index;
				this.imgPreview(this.images, idx);
			},
			imgPreview(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			// 删除图片
			delPic(index, t) {
				this.images.splice(index, 1);
			},
			// ====== end 上传图片功能 ======
			
			
			// 切换报错类型
			onTapTypes() {
				uni.showActionSheet({
					itemList: this.typeNames,
					success: res => {
						this.currType = res.tapIndex;
					},
					fail: err => {
						//console.log(res.errMsg);
					}
				})
			},
			
			
			// 校验表单
			validateForm() {
				if (!this.detail) return this.$util.Tips({
					title: '请输入原因'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.userPhone)) return this.$util.Tips({
					title: '请输入您的联系电话'
				});
				if(this.currType === 0) {
					if (this.images.length < 1) return this.$util.Tips({
						title: '请上传营业执照等资质图片'
					});
				}
				
				return true;
			},
			
			// 提交修改
			formSubmit(e) {
				let that = this;
				if (that.validateForm()) {
					uni.showLoading({
						title:"提交中..."
					})
					
					let shopId = this.shopId, detail = this.detail, userPhone = this.userPhone, type = this.currType;
					let images = this.images.length > 0 ? this.images.join(",") : "";
					
					addShopComplaint({shopId, type, detail, userPhone, images}).then(res => {
						uni.hideLoading();
						uni.showModal({
							title: '感谢您的提交！',
							showCancel: false,
							content: '',
							success: function(res) {
								uni.navigateBack();
							}
						});
					}).catch(err => {
						uni.hideLoading();
						that.$util.Tips({
							title: err.msg
						});
					})
					
				}
			},

			jumpToList() {
				// uni.navigateTo({
				// 	url: "/pages/shop/shop_comaplaint_record"
				// })
			},
			
			// ====== begin 获取微信绑定手机号码 ======
			// 注意只有能真机上才有效，在模拟器上会提示错误：Error: 用户绑定的手机需要进行验证
			// #ifdef MP
			getPhoneNumber(e) {
				let that = this;
				if(!e.detail || !e.detail.iv)
					console.error("getPhoneNumber要在真机环境才能使用");
				appletsDecrypt({
					iv:e.detail.iv, 
					encryptedData:e.detail.encryptedData,
					code:that.code
					}).then(res => {
						that.userPhone = res.message;
					})
			},
			// #endif
			// ====== end 获取微信绑定手机号码 ======
		}
	}
</script>

<style scoped lang="scss">
	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 20rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}
		
	.title {
		font-size: xxx-large;
		font-weight: bolder;
		color: white;
		position: absolute;
		display: flex;
		justify-content: center;
		top: 20rpx;
		width: 100%;
	}
	
	.item-name{
		width: 190rpx;
	}

	.merchantsSettled {
		background: linear-gradient(#f7f7f7 0%, #dad9d9 100%);
		// height: 140vh;
	}

	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}

	.merchantsSettled .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 22px 0;
		margin: 80rpx 15px;
		position: absolute;
		top: 0rpx;
		// margin-top: -160px;
		width: calc(100% - 30px);
	}

	.merchantsSettled .list .item {
		padding: 50rpx 0 20rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		margin: 0 20px;

		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}

		.item-title {
			color: #666666;
			font-size: 28rpx;
			display: block;
		}

		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}

	.acea-row,
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.upload {
		margin-top: 20rpx;
	}

	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}

	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}


		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;

			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}

		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}

	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}

	.merchantsSettled .list .item input {
		width: 400rpx;
		font-size: 30rpx;
		// margin-left: 30px;
	}
	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}
	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}
	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}
	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}
	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid #E93323;
		border-radius: 15px;
		color: #E93323;
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.merchantsSettled .submitBtn {
		width: 588rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		background: #E3E3E3;
		margin-top: 25px;
	}
	.merchantsSettled .submitBtn.on {
		background: #E93323;
	}
	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}
	
	/deep/ uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}

	// ====== begin 获取微信绑定手机号码 ======
	.getPhoneBtn{
		font-size: 32rpx;
		width: 580rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border: 1rpx solid #3CB625;
		color: #3CB625;
		margin: 40rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
		.iconfont{
			font-size: 32rpx;
			margin-right: 12rpx;
		}
	}
	// ====== end 获取微信绑定手机号码 ======
</style>
